<script setup>
import { computed, ref, reactive } from 'vue'

const isShow = ref(true)
const search = ref('')
const filterTableData = computed(() =>
  tableData.filter((data) => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase()))
)
const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleDelete = (index, row) => {
  console.log(index, row)
}
const formInline = reactive({
  user: '',
  region: '',
  date: ''
})

const onSubmit = () => {
  console.log('submit!')
}
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'John',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Morgan',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'John',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Morgan',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'John',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Morgan',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles'
  }
]
</script>

<template>
  <!--  <el-button type="success" @click="setShow">Success</el-button>-->
  <transition name="el-zoom-in-center" appear mode="out-in">
    <div v-if="isShow" style="padding: 15px" class="buton">
      <el-row class="mb-4">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="Approved by">
            <el-input v-model="formInline.user" placeholder="Approved by" clearable />
          </el-form-item>
          <el-form-item label="Activity zone">
            <el-select v-model="formInline.region" placeholder="Activity zone" clearable>
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="Activity time">
            <el-date-picker v-model="formInline.date" type="date" placeholder="Pick a date" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">Query</el-button>
          </el-form-item>
        </el-form>
        <!--        <el-button type="primary">Primary</el-button>-->
        <!--        <el-button type="info">Info</el-button>-->
        <!--        <el-button type="warning">Warning</el-button>-->
        <!--        <el-button type="danger">Danger</el-button>-->
      </el-row>
      <el-table :data="filterTableData" stripe style="width: 100%">
        <el-table-column label="Date" prop="date" />
        <el-table-column label="Name" prop="name" />
        <el-table-column align="right">
          <template #header>
            <el-input v-model="search" size="small" placeholder="Type to search" />
          </template>
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination style="margin: 20px 0" small background layout="prev, pager, next" :total="50" class="mt-4" />
    </div>
  </transition>
</template>

<style scoped lang="scss">
.buton {
  background-color: var(--testbgcolor);
}
.demo-form-inline {
  margin: 10px 0;
  background-color: var(--testbgcolor);
}
</style>
